<template>
  <div class="title-btns block">
    <el-button type="primary" @click="addClickEvent" v-if="hasAuth(auth, 'plus')">
      {{$t('ship.button.plus')}}
    </el-button>
  </div> 

  <el-table
      v-if="refreshTable" 
      :data="listData" 
    >
    <el-table-column prop="postCode" label="岗位编号" width="180"/>
      <el-table-column prop="postName" label="岗位名称" width="260"/>
      <el-table-column prop="postSort" label="排序" width="200"/> 
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope"> 
          <span>{{ statuss[scope.row.status] }}</span> 
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template #default="scope">
          <span>{{ convertDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Operation" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <span v-if="hasAuth(auth, 'edit')" class="btn-primary" @click="editClickEvent(scope.row)">{{$t('ship.button.edit')}}</span>&nbsp;
          <span v-if="hasAuth(auth, 'remove')" class="btn-primary" @click="removeClickEvent(scope.row.id)">{{$t('ship.button.remove')}}</span>
        </template>
      </el-table-column>
    </el-table>
 

  <el-dialog
      :width="500"
      :title="dialogTitle"
       destroy-on-close
       v-model="dialogFormVisible"
       @close="orgForm.resetFields()">
    <el-form :model="formParam" :rules="rules" ref="orgForm">
 
      <el-form-item label="岗位编号" label-width="80px" prop="postCode">
        <el-input v-model="formParam.postCode" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="岗位名称" label-width="80px" prop="postName">
        <el-input v-model="formParam.postName" autocomplete="off" clearable></el-input>
      </el-form-item>

      <el-form-item label="序号" label-width="80px" prop="postSort">
        <el-input v-model="formParam.postSort" autocomplete="off" maxlength="11" clearable></el-input>
      </el-form-item>
<!-- 
      <el-form-item label="联系电话" label-width="80px" prop="phone">
        <el-input v-model="formParam.phone" autocomplete="off" maxlength="11" clearable></el-input>
      </el-form-item> -->
      <el-form-item label="状态" label-width="80px" prop="status">
        <el-select v-model="formParam.status" placeholder="请选择启用状态">
          <el-option
            :key="index"
            :label="item"
            :value="index"
            v-for="(item, index) in statuss"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
      
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible=false">Cancel</el-button>
      <el-button @click="resetForm" type="warning">Reset</el-button>
      <el-button type="primary" @click="submitForm">Save</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script lang="ts"  setup>
import { ref,  onMounted } from 'vue'
import service from '@/utils/request'
import { hasAuth } from "@/utils/auth";
import {  convertDate } from "@/utils/date"
import { ElNotification, ElMessageBox } from 'element-plus' 
import {useMixinAuth} from '@/components/mixin/auth.js'
const auth = useMixinAuth();
const orgForm = ref(null)
const dialogTitle = ref('新增岗位')
const initForm = {
  postId: undefined,
  postCode: undefined,
  postName: undefined, 
  postSort: undefined, 
  phone: undefined, 
  status: "0"
}
const formParam = ref(Object.assign({}, initForm))

let isAdd = true 

const rules = ref( {
  postCode: [
    { required: true, message: "岗位编码不能为空", trigger: "blur" }
  ],
  postName: [
    { required: true, message: "岗位名称不能为空", trigger: "blur" }
  ] 
})
const statuss = {
  0: 'normal',
  1: 'stop',
}
 
const listData = ref([])
const refreshTable = async () => {
  listData.value = (await service.get('shipping/post/list')).data
}
const dialogFormVisible = ref(false)
 

const addClickEvent = () => {
  dialogTitle.value = 'add post'
  dialogFormVisible.value = true
  isAdd = true
  Object.assign(formParam.value, initForm)
}

let editRowId
const editClickEvent = (row) => {
  editRowId = row.id
  dialogTitle.value = '修改岗位'
  isAdd = false
  dialogFormVisible.value = true
  Object.keys(initForm).forEach(k =>  (formParam.value[k] = row[k]))
 
}

const removeClickEvent = (id) => {
  ElMessageBox.confirm('确认删除岗位？', 'Confirmation Information', {type: 'warning'}).then(async () => {
    await service.delete(`rental/post/${id}`)
    // @ts-ignore
    ElNotification.success({title: 'Prompt information', message: '删除机构成功', position: 'bottom-right'})
    refreshTable()
  })

}

const resetForm = () => {
  // @ts-ignore
  orgForm.value.resetFields()
}

const submitForm = () => {
  // @ts-ignore
  orgForm.value.validate(async (valid) => {
    if (!valid) {
      // @ts-ignore
      ElNotification.warning({ title: 'Prompt information', message: 'Verification failed!', position: 'bottom-right' })
      return
    }
    const params = formParam.value
    await service[isAdd? 'post': 'put']('rental/post'  , params)
    // @ts-ignore
    ElNotification.success({ title: 'Prompt information', message: 'Successfully saved', position: 'bottom-right' })
    dialogFormVisible.value = false
    refreshTable()
  })
}

 

onMounted(() => refreshTable()) 


</script>

<style scoped lang="scss" src="./index.scss"></style>
